<template>
  <div class="mobian">
    <div class="mobian-container">
      <div class="mobian-header">
        <div
          v-for="(item, i) in mobianList"
          :key="i"
          class="silder"
          @click="radio = item.value"
          :class="radio == item.value ? 'bottom-line' : null"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="mobian-view">
        <div class="mobian-left">
          <i class="el-icon-d-arrow-right arrow"></i>
          <i class="el-icon-d-arrow-right arrow" :style="{ top: '400px' }"></i>
          <i class="textA">清洗机</i>
          <i class="textB">磨边机</i>
          <div class="glass-list">
            <el-tooltip
              placement="right"
              v-for="child in reGlassList"
              :key="child.id"
            >
              <div slot="content">
                ID: {{ child.id }}<br /><br />
                客户: {{ child.clientName }}<br /><br />
                尺寸: {{ child.furInWidth }} * {{ child.furInHeight }}
              </div>
              <div
                class="glass"
                :style="{
                  height: child.furInHeight / 20 + 40 + 'px',
                  width: 400 * (child.furInWidth / 8000) + 100 + 'px',
                }"
              >
                {{ child.id }}
              </div>
            </el-tooltip>
          </div>
        </div>
        <div class="mobian-right">
          <el-table :data="glassList" style="width: 100%" height="100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column label="尺寸" width="140">
              <template slot-scope="scope">
                <div class="ruleGlass">
                  {{ scope.row.furInWidth }}*{{ scope.row.furInHeight }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="thick" label="厚度" width="80" />
            <el-table-column label="识别码" width="120" prop="optCodeContext">
            </el-table-column>
            <el-table-column prop="workId" label="订单号" width="80" />
            <el-table-column
              prop="clientName"
              label="客户"
              width="100"
              show-overflow-tooltip
            />
            <el-table-column prop="createTime" label="创建时间" width="200">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-popconfirm
                  cancel-button-text="取消"
                  confirm-button-text="确定"
                  icon="el-icon-info"
                  icon-color="red"
                  @confirm="handlerCode(scope.row)"
                  title="您确定对这块玻璃补码吗？"
                >
                  <el-button
                    type="text"
                    icon="el-icon-camera"
                    style="margin-right: 10px"
                    slot="reference"
                    v-hasPermi="['assembly:glass:edit']"
                    v-if="valueString != null"
                    >补码</el-button
                  >
                </el-popconfirm>
                <el-popconfirm
                  cancel-button-text="取消"
                  confirm-button-text="确定"
                  icon="el-icon-info"
                  icon-color="red"
                  v-hasPermi="['assembly:glass:edit']"
                  @confirm="handleUpdate(scope.row, 1)"
                  title="您确定此玻璃报损吗？"
                >
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    slot="reference"
                    v-hasPermi="['assembly:glass:edit']"
                    >报损</el-button
                  >
                </el-popconfirm>
                <el-popconfirm
                  cancel-button-text="取消"
                  confirm-button-text="确定"
                  icon="el-icon-info"
                  icon-color="red"
                  @confirm="handleUpdate(scope.row, 2)"
                  title="您确定此玻璃异常吗？"
                >
                  <el-button
                    style="padding-left: 5px"
                    type="text"
                    v-hasPermi="['assembly:glass:edit']"
                    icon="el-icon-error"
                    slot="reference"
                    >异常</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mobianList } from "./config/radio";
import { mapState } from "vuex";
import { abnormal } from "@/api/production/quartz";
import { listOperationStatus } from "@/api/production/operation";
import { operationLineStart } from "@/api/production/quartz";
import { cameraList } from "@/views/production/device/Config/camera.js";
export default {
  data() {
    return {
      mobianList,
      radio: 1,
      recmnetGlassList: [],
      dialogVisible: false,
      value: true,
      lineminRules: [0, 0, 0, 0],
      linemaxRules: [0, 0, 0, 0],
      lineRules: [0, 0, 0],
      timer: null,
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.$store.dispatch("listGlass");
    }, 2000);
    this.getStatus();
  },
  methods: {
    handlerCode(event) {
      let params =
        cameraList[this.radio + 1] + "," + event.optCodeContext + ",1,0";
      if (params != null) {
        sendCameraText(params).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        this.$message.warning("位置无扫码相机");
      }
    },
    handlerCheckRule(index) {
      let params = {
        value: this.lineRules[index],
        line: index,
      };
      this.handlerEditStatus("branchingType", params);
    },
    getStatus() {
      listOperationStatus().then(({ rows }) => {
        this.lineRules = rows[0].branchingType;
        this.lineminRules = rows[0].grindGlassSize.filter(
          (item, index) => index % 2 == 0
        );
        this.linemaxRules = rows[0].grindGlassSize.filter(
          (item, index) => index % 2 == 1
        );
      });
    },
    handlerEditStatus(key, params) {
      operationLineStart(key, params).then((res) => {
        this.$modal.msgSuccess(res.msg);
        this.getStatus();
      });
    },
    handlerLineRules(index, type, BIndex) {
      let params = {
        value:
          type == "min" ? this.lineminRules[index] : this.linemaxRules[index],
        line: BIndex,
      };
      this.handlerEditStatus("grindGlassSize", params);
      this.getStatus();
    },
    opnePamrasSetting() {
      this.dialogVisible = true;
    },
    /**
     * radio 选中发生变化 切换卧理机
     */
    handlerRecumentChnage(e) {
      this.loading = true;
      this.selected = 0;
      this.getMachine();
    },
    getMachine() {
      let params = {
        type: this.radio,
      };
      listMachine(params)
        .then((res) => {
          this.machineInfo = res.rows;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    handleUpdate(row, state) {
      if (sessionStorage.getItem("showNewLosses") == "true" && state == 1) {
        this.$openLosses.showDialog([row], () => {
          this.$store.dispatch("listGlass");
        });
      } else {
        this.$prompt("请输入密码", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /^5563$/,
          inputErrorMessage: "密码错误",
          inputType: "password",
        }).then(({ value }) => {
          abnormal(row.id, state).then((res) => {
            this.$modal.msgSuccess(res.msg);
            this.$store.dispatch("listGlass");
          });
        });
      }
    },
    handlerGirdClickEvent(grid) {
      this.selected = this.selected == grid ? 0 : grid;
    },
  },
  computed: {
    ...mapState({
      glassList(state) {
        let arr = {
          1: [519],
          2: [520],
          3: [521],
          4: [522],
          5: [523],
        };
        return state.Glass.glass
          .filter((item) => arr[this.radio].includes(item.place * 1))
          .sort((a, b) => a.orderId - b.orderId);
      },
    }),
    reGlassList() {
      return JSON.parse(JSON.stringify(this.glassList));
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.mobian {
  height: calc(100vh - 50px);
  padding: 0 10px;
  overflow: hidden;
  .mobian-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .mobian-header {
      min-height: 5%;
      display: flex;
      border-bottom: 1px solid #e6e6e6;

      .silder {
        height: calc(100% - 1px);
        min-width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        margin-right: 20px;
        transform: translateY(1px);
      }

      .bottom-line {
        // border-bottom: 2px solid #409eff;
        background: linear-gradient(#fafafa, #1890ff);
      }

      .silder:hover {
        border-bottom: 2px solid #409eff;
      }

      .recument-no {
        width: 100%;
        height: 50px;
      }

      .tips {
        height: 100%;
        display: flex;
        align-items: center;
        margin-left: auto;
        margin-right: 20px;
        letter-spacing: 1.5px;
        font-size: 16px;
      }
    }

    .mobian-view {
      flex: 1;
      display: flex;

      .mobian-left {
        position: relative;
        width: 25%;
        border-left: 5px solid black;
        border-right: 5px solid black;
        max-height: 100%;
        overflow: hidden;

        .arrow {
          position: absolute;
          font-size: 400px;
          color: #e6e6e6;
          left: 50%;
          transform: translateX(-50%) rotate(90deg);
          z-index: -1;
        }

        .textB {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          color: #e6e6e6;
          font-style: oblique;
          font-size: 18px;
          z-index: -1;
        }

        .textA {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          color: #e6e6e6;
          font-style: oblique;
          font-size: 16px;
          z-index: -1;
        }

        .glass-list {
          margin-top: 10px;
          width: 100%;
          max-height: 820px;
          display: flex;
          flex-direction: column;
          overflow: auto;
          cursor: pointer;
          .glass {
            position: relative;
            width: 100%;
            min-height: 40px;
            background-color: #409eff;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 15%);
            i {
              position: absolute;
              left: 5px;
              top: 0px;
            }
          }
        }
      }

      .mobian-right {
        flex: 1;
        margin-left: 2px;
        border-left: 1px dashed #e6e6e6;

        .btn-list {
          height: 50px;
          width: 100%;
        }
      }
    }
  }
}

::v-deep .el-icon-bell,
.el-icon-setting {
  font-size: 24px;
  cursor: pointer;
  margin-left: 5px;
}

::v-deep .el-icon-setting:hover {
  text-decoration: underline;
  text-decoration-color: #e6e6e6;
  cursor: pointer;
}

.dialogBody {
  width: 100%;
  height: 600px;

  .line-body {
    width: 100%;
    height: 250px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px dashed #e6e6e6;
    margin-bottom: 20px;

    .line-title-text {
      font-size: 18px;
      border-left: 4px solid #467bd6;
      padding-left: 6px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .modelSetting {
      display: flex;
      flex-wrap: wrap;

      .model-text {
        font-size: 15px;
      }

      .model-btn {
        margin-left: auto;
      }
    }

    .mobianSet {
      flex: 1;
      display: flex;

      flex-direction: column;

      .item {
        flex: 1;
        display: flex;
        margin-top: 10px;

        .model-text {
          margin-left: 10px;
        }

        .model-btn {
          margin-left: auto;
        }
      }
    }
  }
}

/deep/ .el-dialog__body {
  padding: 10px 20px;
}
</style>
